/* 消息中心 */
<template>
    <div style="background: #f8f8f9">
        <Row :gutter="32">
            <!-- 左侧 -->
            <Col span="17">
            <Card>
                <p slot="title">收件箱</p>
                <Table highlight-row @on-current-change="showMod" border ref="selection" :columns="columns1" :data="data1"></Table>
                <Row type="flex" justify="space-between" style="margin-top: 10px">
                    <Col span="8" style="margin-top: 10px">
                    <Button type="primary">标记已读</Button>
                    <Button type="error">删除</Button>
                    </Col>

                    <Col span="12" style="text-align:right">
                    <Page :total="20" show-total />

                    </Col>
                </Row>
            </Card>
            <Card style="margin-top: 10px">
                <p slot="title">发件箱</p>
                <Table border ref="selection" :columns="columns2" :data="data2"></Table>
                <Row type="flex" justify="space-between" style="margin-top: 10px">
                    <Col span="8">
                    <Button type="error">删除</Button>
                    </Col>
                    <Col span="12" style="text-align:right">
                    <Page :total="20" show-total />
                    </Col>
                </Row>
            </Card>
            </Col>
            <!-- 右侧 -->
            <Col span="7">
            <Card style="height: 100%">
                <p slot="title">联系人</p>
                <Row>
                    <Col span="24">
                    <Input search enter-button="搜索" placeholder="请输入关键字" style="width:90%" />
                    </Col>
                </Row>
                <table width="100%" cellspacing="0" cellpadding="0" style="margin-top: 10px">
                    <tr>
                        <th>
                            联系人30人
                        </th>
                    </tr>
                    <tr>
                        <td class="leftbgc" style="text-align:left">
                            <Tree :data="data3" ref="tree4" @on-select-change="choiceAll" ></Tree>
                            <!-- <Tree :data="data3" ref="tree4" @on-check-change="choiceAll" ></Tree> -->
                        </td>
                    </tr>
                </table>
            </Card>
            </Col>
        </Row>
        <Modal title="消息查看" v-model="modal7" :closable="false">
            <Form :model="formLeft" label-position="right" :label-width="100">
                <FormItem label="发件人">
                    张三
                    <!-- <Input v-model="formLeft.input1"></Input> -->
                </FormItem>
                <FormItem label="主体">
                    我发给李四
                    <!-- <Input v-model="formLeft.input2"></Input> -->
                </FormItem>
                <FormItem label="消息内容">
                    内容是王五
                    <!-- <Input v-model="formLeft.input3"></Input> -->
                </FormItem>
            </Form>
        </Modal>
        <Modal title="发消息" v-model="modalSend" :closable="false">
            <Form :model="formLeft" label-position="right" :label-width="100">
                <FormItem label="收件人">
                    张三
                    <!-- <Input v-model="formLeft.input1"></Input> -->
                </FormItem>
                <FormItem label="主体">
                    我发给李四
                    <!-- <Input v-model="formLeft.input2"></Input> -->
                </FormItem>
                <FormItem label="消息内容">
                    爱上了对方就卡死了都费劲啊楼上的房间辣水电费看见
                    <!-- <Input v-model="formLeft.input3"></Input> -->
                </FormItem>
            </Form>
        </Modal>
        <Modal title="信息查看" v-model="modalInfo" :closable="false" @on-ok="ok">
            <Row :gutter="16">
                <Col span="12">
                <Form :model="formLeft" label-position="right" :label-width="70">
                    <FormItem label="姓名">
                        张三
                    </FormItem>
                    <FormItem label="性别">
                        女
                    </FormItem>
                    <FormItem label="职位">
                        女
                    </FormItem>
                    <FormItem label="所属部门">
                        爱上了对方就卡死了都费劲啊
                    </FormItem>
                    <FormItem label="手机号码">
                        163516131321
                    </FormItem>
                </Form>
                </Col>
                <Col span="12">
                <Form :model="formLeft" label-position="left" :label-width="40">
                    <FormItem label="头像">
                        <div style="widit:100px;height:100px;background:yellow">

                        </div>
                    </FormItem>
                    <FormItem label="生日">
                        618419616
                    </FormItem>
                    <FormItem label="邮箱">
                        123123123@123
                    </FormItem>
                    <FormItem label="QQ">
                        123123123
                    </FormItem>
                    <FormItem label="微信">
                        163516131321
                    </FormItem>
                </Form>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                modalInfo: false,
                modalSend: false,
                modal7: false,
                formLeft: {
                    input1: "",
                    input2: "",
                    input3: ""
                },
                columns1: [{
                        type: "selection",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "发件人",
                        key: "person1",
                        align: "center"
                    },
                    {
                        title: "主题",
                        key: "subjec1",
                        align: "center"
                    },
                    {
                        title: "内容",
                        key: "content1",
                        align: "center"
                    },
                    {
                        title: "时间",
                        key: "time1",
                        align: "center"
                    }
                ],
                data1: [{
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    },
                    {
                        person1: "张三",
                        subjec1: "XXXX",
                        content1: "xxxxxxx",
                        time1: "2018-8-31"
                    }
                ],
                columns2: [{
                        type: "selection",
                        width: 60,
                        align: "center",
                        align: "center"
                    },
                    {
                        title: "收件人",
                        key: "person2",
                        align: "center"
                    },
                    {
                        title: "主题",
                        key: "subjec2",
                        align: "center"
                    },
                    {
                        title: "内容",
                        key: "content2",
                        align: "center"
                    },
                    {
                        title: "时间",
                        key: "time2",
                        align: "center"
                    }
                ],
                data2: [{
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    },
                    {
                        person2: "张三",
                        subjec2: "XXXX",
                        content2: "xxxxxxx",
                        time2: "2018-8-31"
                    }
                ],
                data3: [{
                    title: "鑫安利中（北京）科技有限公司",
                    expand: true,
                    children: [{
                            title: "总经理办",
                            expand: true,
                            disabled: true,
                            children: [{
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                }
                            ]
                        },
                        {
                            title: "总公室",
                            expand: true,
                            disabled: true,
                            children: [{
                                    title: "李四"
                                },
                                {
                                    title: "王五"
                                }
                            ]
                        },
                        {
                            title: "技术部",
                            expand: true,
                            disabled: true,
                            children: [{
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                },
                                {
                                    title: "张三"
                                }
                            ]
                        },
                        {
                            title: "业务部",
                            expand: true,
                            children: [{}]
                        }
                    ]
                }]
            };
        },
        methods: {
            showMod() {
                this.modal7 = true;
            },
            choiceAll(data) {
                console.log(data[0].title)
                this.modalInfo = true;
            },
            ok() {
                this.modalSend = true;
            }
        }
    };
</script>

<style scoped>
</style>